const webpack = require('webpack');
const base = require('./webpack.base');
const merge = require('webpack-merge');
const FirendlyErrorePlugin = require('friendly-errors-webpack-plugin')
const utils = require('./utils');

const IP = utils.getIPAdress();
const POTR = 8081;

module.exports = merge({
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  devServer: {
    host: '0.0.0.0',
    port: POTR,
    // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
    historyApiFallback: true, // 解决单页面路由问题，
    contentBase: '../dist',
    open: false, // 自动打开浏览器
    hot: true, // 开启热替换, css代码跟新不刷新页面
    clientLogLevel: 'warning',
    overlay: {
      warnings: false,
      errors: true
    },
    quiet: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new FirendlyErrorePlugin({
      clearConsole: true,
      compilationSuccessInfo: {
        messages: [
          `Project running at: http://localhost:${POTR}`,
          `and also running at: http://${IP}:${POTR}`
        ]
      }
    })
  ],
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js'
  }
}, base);
